<script setup lang="ts">
import { ref } from 'vue'
import {
  NosRadioGroup,
  NosRadioButton,
  NosTabs,
  NosTabPane,
  NosButton,
  NosCard,
  NosCheckbox,
  NosDivider,
  NosInput,
  NosPanel
} from '../packages'

const activeTab = ref('BAZ')

const inputText = ref('')

const check = ref(false)

const radio = ref('choice 1')
</script>

<template>
  <nos-card class="container">
    <div>
      <nos-button>OK</nos-button> <nos-button disabled>OK</nos-button>
    </div>
    <div>
      <nos-card>HELLO<br>WORLD</nos-card>
    </div>
    <div>
      <nos-card type="hollow">HELLO<br>WORLD</nos-card>
    </div>
    <div>
      <nos-card type="window">HELLO<br>WORLD</nos-card>
    </div>
    <div>
      HELLO<nos-divider vertical />WORLD
    </div>
    <div>
      <div>HELLO</div>
      <nos-divider />
      <div>WORLD</div>
    </div>
    <div>
      <nos-panel>HELLO<br>WORLD</nos-panel>
    </div>
    <div>
      <nos-panel title="title">HELLO<br>WORLD</nos-panel>
    </div>
    <div>
      <nos-tabs v-model="activeTab">
        <nos-tab-pane name="FOO">FOO</nos-tab-pane>
        <nos-tab-pane name="BAR">BAR</nos-tab-pane>
        <nos-tab-pane name="BAZ">BAZ</nos-tab-pane>
      </nos-tabs>
    </div>
    <div>
      <nos-input v-model="inputText" />
    </div>
    <div>
      <nos-input type="textarea" v-model="inputText" />
    </div>
    <div>
      <nos-radio-group v-model="radio">
        <nos-radio-button name="choice 1">CHOICE 1</nos-radio-button>
        <br>
        <nos-radio-button name="choice 2">CHOICE 2</nos-radio-button>
      </nos-radio-group>
    </div>
    <div>
      <nos-checkbox v-model="check">CHECK</nos-checkbox>
    </div>
  </nos-card>
</template>

<style>
.container {
  margin: 0 auto;
  width: 600px;
  padding: 20px;
}

.container > div + div {
  margin-top: 20px;
}
</style>
